<template>
    <div>
        <el-table :data="props.list" style="width: 100%" size="large" border @select="select" @select-all="select" row-class-name="row_name"  :header-cell-style="{
            textAlign: 'center',
            height: '42px',
			background: '#e9f2fa',
        }">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column label="Date" width="180" >
            </el-table-column> -->
            <el-table-column prop="role_name" label="部门名称" align="center" />
            <el-table-column prop="user_num" label="部门人数" align="center" />
            <el-table-column label="部门状态" align="center">
                <template #default="scope">
                    <div class="status_data">
                        <span :class="{ status_color: scope.row.status, status_is_color: true }"></span> {{ scope.row.status ?
                            "启用" : "禁用" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="creator_name" label="创建人" align="center" />
            <el-table-column label="创建时间" align="center">
                <template #default="scope">
                    {{ get_time(scope.row.created_at) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <div class="operate">
                        <el-button type="primary" @click="change_data(scope.row)">编辑</el-button>
                        <el-button type="success"  @click="setPer(scope.row)">设置权限</el-button>
                        <el-button type="danger" @click="delete_data(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script lang="ts" setup>
import { get_time } from "@/utils/time"
import { delete_dept_list } from "@/request/api/dept.ts"
import { defineProps } from "vue"
const props = defineProps(["list"])
const emits = defineEmits(["change","setPer"])
interface User {
    date: string
    name: string
    address: string
}
// 全部勾选的id数组
let selection_data:any = []
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}

const delete_data = async (row: any) => {
    let ids:any = []
    if(selection_data.length>0){
        selection_data.forEach((item:any) => {
            ids.push(item.id)
        });
    }else{
        ids.push(row.id)
    }
    let data:any = await delete_dept_list({ id: ids })
    console.log(data, "data");
    if (data.message == "success") {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        location.reload()
    }else{
        ElMessage.error(data.message)
    }
}
// 编辑
const change_data = (row: any) => {
    emits("change",row)
}
const select = (selection:any)=>{
    selection_data = selection
}
const setPer = (row:any) =>{
    emits("setPer",row)
}
</script>
<style lang="scss" scoped>
	:deep(.cell){
	    color:#5e6d82 ;
	    font-size: 13px;
	}
	:deep(thead){
	    .cell{
	        color:#1f2f3d ;
	        font-size: 14px;
	        font-weight: 650;
	    }
	}
:deep(.el-table td.el-table__cell) {
    // border-bottom: none;
}

:deep(.el-table th.el-table__cell.is-leaf) {
    // border-bottom: none;
}

:deep(.el-table__inner-wrapper) {
    &::before {
        height: 0;
    }
}

:deep(.el-table th.el-table__cell) {
    background-color: rgb(242, 242, 242);
}

.operate {
    display: flex;
    justify-content: space-between;

    span {
        cursor: pointer;
    }

    .bianji {
        color: rgb(112, 182, 3);
    }

    .shanchu {
        color: rgb(245, 108, 108);
    }
}

.status_data {
    display: flex;
    align-items: center;
    justify-content: center;
    .status_is_color {
        width: 4px;
        height: 4px;
        display: inline-block;
        background:#c5002b;
        border-radius: 50%;
        margin-right: 10px;
        &.status_color{
            background: rgb(112, 182, 3);
        }
    }
}
:deep(.row_name){
   height: 42px !important;
}
:deep(.el-table__cell){
    padding: 0;
}
</style>